import $ from 'jquery';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { CountUp } from 'countup.js';
import { BannerGl,SliderMove,SliderMoveHome,Frame,SingleScreen } from '../common/component';
gsap.registerPlugin(ScrollTrigger);
import Swiper from '../common/swiper-bundle.esm.browser.min';

export const BaseAnimate = (base,lenis)=>{
    gsap.defaults({duration:1,ease: "sine.out"});
    const el={
        alanGo:document.querySelectorAll(".alanGo"),
        scrollFn:document.querySelectorAll("[data-scroll]"),
        toTop:document.querySelectorAll('.toTop'),
        fixBox:document.querySelector('#fixBox'),
        vh:document.querySelectorAll("[data-vh]"),
        full:document.querySelectorAll("[data-full]"),
        header:document.querySelector("header"),
        navListPc:document.querySelectorAll('.navList'),
        footList:document.querySelectorAll(".footItems .list"),
        closePop:document.querySelector('.closePop'),
        pop:document.querySelector('.layer-pop'),
        searchEl:document.querySelectorAll(".layer-search"),
        lineFn:document.querySelectorAll(".lineFn"),
        childNav:document.querySelectorAll(".layer-child"),
        chunkFn:document.querySelectorAll('.chunkFn'),
        rowSlider:document.querySelector('.rowSlider'),
        stickyRow:document.querySelector('.stickyRow'),
        fixGo:document.querySelectorAll(".fixGo"),
        scrEl:document.querySelectorAll('.scr')
    }
    el.scrollFn.forEach((item, index) => {
        let x =0;
        let y =0;
        if(item.dataset.appscroll&&base.shu){
            x = parseInt(item.dataset.appscroll.split(',')[0]);
            y = parseInt(item.dataset.appscroll.split(',')[1]);
        }else{
            x = base.shu ? (parseInt(item.dataset.scroll.split(',')[0]) / 2) : parseInt(item.dataset.scroll.split(',')[0]);
            y = base.shu ? (parseInt(item.dataset.scroll.split(',')[1]) / 2) : parseInt(item.dataset.scroll.split(',')[1]);
        }
        gsap.timeline({
            scrollTrigger: {
                trigger: item,
                start: 'top-=' + base.winsize.vh,
                end: "+=" + (item.getBoundingClientRect().height + base.winsize.vh),
                scrub: 0.9
            }
        }).fromTo(item, {x: -x, y: -y}, {x: x, y: y, ease: "none"});
    });
    if(base.shu){
        el.vh.forEach((items)=>{
            gsap.set(items,{height:base.winsize.vh*parseFloat(items.dataset.vh)});
        });
    }
    el.alanGo.forEach(function (items){
        base.Viewport(items,()=>{
            items.classList.add('go')
        },()=>{},"-5%");
    });
    el.toTop.forEach((child)=>{
        child.addEventListener("click",function(){
            if(base.shu){
                $('html, body').animate({
                    scrollTop: 0
                }, 1000);
            }else{
                lenis.scrollTo(0,{duration:1.5});
            }
        })
    });

    el.full.forEach((child)=>{
        const radio_w = parseInt(child.dataset.full.split(',')[1])/parseInt(child.dataset.full.split(',')[0]);
        const radio_h = parseInt(child.dataset.full.split(',')[0])/parseInt(child.dataset.full.split(',')[1]);
        const angle = base.winsize.vh/base.winsize.vw;
        if(angle<radio_w){
            child.style.height= radio_w*base.winsize.vw+'px';
            child.style.width= base.winsize.vw+'px';
        }else{
            child.style.height= base.winsize.vh+'px';
            child.style.width= radio_h*base.winsize.vh+'px';
        }
    });

    el.childNav.forEach((child,key)=>{
        child.addEventListener('mouseenter',function(){
            child.classList.add('on');
            $(child).siblings().addClass('none')
        });
        child.addEventListener('mouseleave',function(){
            child.classList.remove('on');
            $(child).siblings().removeClass('none')
        })
    });

    /*数字跳动*/
    const countFn = document.querySelectorAll('.countFn');
    countFn.forEach(item=>{
        var el_ = item.querySelector('.count');
        if(el_){
            var num = parseFloat(el_.innerHTML);
            gsap.set(el_,{width:el_.getBoundingClientRect().width});
            base.Viewport(item,function(){
                (new CountUp(el_, num,{
                    duration: 1.0,
                    separator:"",
                    decimalPlaces: ((num.toString()).split('.').length-1),
                })).start();
                item.classList.add('go');
            },function(){
                item.classList.remove('go');
            })
        }
    });

    /*背景固定*/
    const fixBg = document.querySelectorAll(".fixBg");
    fixBg.forEach((child)=>{
        base.Viewport(child.parentElement,function(){
            child.classList.add('showImg');
        },function(){
            child.classList.remove('showImg');
        },"0px");
    });
    /*元素滚动固定*/
    const fixFn = document.querySelectorAll(".fixFn");
    fixFn.forEach((child)=>{
        const view = child.getBoundingClientRect();
        const rect = base.getTop(child);
        const offset = parseFloat(child.dataset.offset)*base.winsize.vh;
        const childEl = child.querySelector('.child');
        lenis.on('scroll', (e) => {
            const dir = rect - e.animatedScroll - offset;
            if(dir<=0){
                childEl.style.position = "fixed";
                childEl.style.left = view.left+'px';
                childEl.style.top = offset+'px';
            }else{
                childEl.style.position = "absolute";
                childEl.style.left = '0px';
                childEl.style.top = '0px';
            }
        });
    });

    /*导航变色*/
    const navColor = document.querySelectorAll('[data-nav]');
    navColor.forEach((child)=>{
        if(parseInt(child.dataset.nav)>0){
            base.Viewport(child,function(){
                el.header.classList.add('blueColor');
            },function(){
                el.header.classList.remove('blueColor');
            })
        }
    });

    /*下拉选择*/
    const downFn =document.querySelectorAll('.layer-down');
    downFn.forEach((child)=>{
        const childEl = child.querySelector('.child');
        const txtEl = child.querySelector('.inDown');
        const putEl = child.querySelector('.inTxt');
        if(childEl){
            const lists = childEl.querySelectorAll('li');
            lists.forEach((items)=>{
                items.addEventListener('click',function(){
                    const txt = items.dataset.msg;
                    if(txtEl){txtEl.innerHTML = txt;}
                    if(putEl){putEl.value = txt;}
                })
            })
        }
    })

    /*hash定位*/
    base.hashPosition();

    /*滚动一定稿高度导航变化*/
    if(!base.shu){
        let isDown = false;
        lenis.on('scroll', (e) => {
            if(e.animatedScroll>(base.winsize.vh*0.5)&&!isDown){
                el.header.classList.add("down");
                el.fixBox.classList.add("active");
                isDown = true;
            }
            if(e.animatedScroll<=(base.winsize.vh*0.5)&&isDown){
                el.header.classList.remove("down");
                el.fixBox.classList.remove("active");
                isDown = false;
            }
        });
    }

    /*播放按钮唤起视频弹窗*/
    let mediaGo=document.querySelectorAll('[data-player]');
    mediaGo.forEach((item)=>{
        item.addEventListener('click',function (){
            const src = item.dataset.player;
            gsap.timeline({
                onStart:()=>{
                    el.pop.classList.add('on');
                    if(src.split("").length>0){
                        el.pop.querySelector('.popMedia').src=src;
                    }
                },
                onComplete:()=>{
                    if(el.pop.querySelector('.popMedia')){el.pop.querySelector('.popMedia').play();}
                }
            })
              .addLabel('start',0)
              .to(el.pop,{opacity:1,duration:0.5},'start')
              .to(el.pop.querySelector('.popCon'),{opacity:1,y:0,duration:0.5},'start')
        })
    });
    if(el.pop){
        el.closePop.addEventListener('click',function (){
            gsap.timeline({
                onStart:()=>{
                    el.pop.querySelector('.popMedia').pause();
                },
                onComplete:()=>{
                    el.pop.classList.remove('on');
                }
            })
              .addLabel('start',0)
              .to(el.pop,{opacity:0,duration:0.5},'start')
              .to(el.pop.querySelector('.popCon'),{opacity:0,y:-30,duration:0.5},'start')
        })
    }

    //手机导航
    const ham = document.querySelector('#menu');
    if(ham){
        const appList = document.querySelectorAll('.appLists');
        const menu = document.querySelector('nav.menu');
        const elmOverlay = document.querySelector('.shape-overlays');
        let isOpen = false;
        let isAni = false;
        let appCur = -1;
        ham.addEventListener('click',()=>{
            if(isAni) return false;
            isAni = true;
            if(!isOpen){
                ham.classList.add('is-opened-navi');
                el.header.classList.add("open");
                gsap.timeline({
                    onStart:()=>{
                        elmOverlay.classList.add('is-opened');
                        setTimeout(function (){
                            appList.forEach((child,key)=>{
                                if(key===(appList.length-1)){
                                    gsap.timeline({
                                        onComplete:()=>{isAni = false;}
                                    })
                                      .addLabel('start')
                                      .fromTo(child,{opacity:0,y:-(100-12*key)},{opacity:1,y:0,duration:1,ease: "power2.out"});

                                }else{
                                    gsap.timeline()
                                      .addLabel('start')
                                      .fromTo(child,{opacity:0,y:-(100-12*key)},{opacity:1,y:0,duration:1,ease: "power2.out"});
                                }
                            });
                            isOpen = true;
                        },300)
                    }
                })
                  .addLabel('start')
                  .to(menu,{autoAlpha:1,duration:0.1});
            }else{
                isOpen = false;
                elmOverlay.classList.remove('is-opened');
                if(appCur>=0){
                    $(appList).eq(appCur).find('.child').slideUp(300);
                    $(appList).removeClass('gray');
                    $(appList).removeClass("active");
                    appCur = -1;
                }
                el.header.classList.remove("open");
                ham.classList.remove('is-opened-navi');
                appList.forEach((child,key)=>{
                    if(key===(appList.length-1)){
                        gsap.timeline({
                            onComplete:()=>{
                                isAni = false;
                                gsap.timeline()
                                  .addLabel('start')
                                  .to(menu,{autoAlpha:0,duration:0.1});
                            }
                        })
                          .addLabel('start')
                          .to(child,{opacity:0,y:-(50-5*key),duration:0.3,ease: "power1.out"});

                    }else{
                        gsap.timeline()
                          .addLabel('start')
                          .to(child,{opacity:0,y:-(50-5*key),duration:0.3,ease: "power1.out"});
                    }
                })
            }
        });
        appList.forEach((items,key)=>{
            items.addEventListener("click",function(){
                if(appCur===key){
                    $(appList).removeClass('gray');
                    items.classList.remove("active");
                    appCur = -1;
                    $(items).find('.child').slideUp();
                }else{
                    $(appList).addClass('gray')
                    items.classList.remove("gray");
                    $(items).addClass("active").siblings().removeClass("active");
                    if(appCur>=0){$(appList).eq(appCur).find('.child').slideUp();}
                    $(items).find('.child').slideDown();
                    appCur = key;
                }
            });
        })
    }

    /*列表项下拉*/
    const downListFn = document.querySelectorAll('.layer-downList');
    let heiArr = [];
    let downCur = -1;
    downListFn.forEach((child,key)=>{
        const elm = child.querySelector('.child');
        const h = elm.getBoundingClientRect().height;
        heiArr.push({el:elm,height:h});
        gsap.set(elm,{height:0});
        child.addEventListener("click",function(){
            if(downCur===key){
                gsap.timeline({
                    onStart:()=>{child.classList.remove('active');}
                }).to(elm,{height:0,duration:0.5});
                downCur = -1;
            }else{
                if(downCur>=0){
                    gsap.timeline({
                        onStart:()=>{
                            child.classList.add('active');
                            heiArr[cur].el.parentElement.classList.remove('active');
                            downCur = key;
                        }
                    }).addLabel("start",0)
                      .to(heiArr[cur].el,{height:0,duration:0.3},"start")
                      .to(elm,{height:heiArr[key].height,duration:0.5},"start");
                }else{
                    gsap.timeline({
                        onStart:()=>{child.classList.add('active');downCur = key;}
                    }).addLabel("start",0)
                      .to(elm,{height:heiArr[key].height,duration:0.5});
                }

            }
        })
    });

    /*Tab项*/
    const tabFn = document.querySelectorAll('[data-tabel]');
    tabFn.forEach((elm)=>{
        const tabs = elm.querySelectorAll('[data-tab]');
        const boxs = elm.querySelectorAll('.'+elm.dataset.tabel);
        let curPart = 0;
        tabs.forEach((child,key)=>{
            const num = parseInt(child.dataset.tab);
            child.addEventListener("click",function (){
                base.siblings(child,"on");
                gsap.timeline({
                    onStart:()=>{},
                    onComplete:()=>{
                        boxs[curPart].classList.remove('on');
                        boxs[num].classList.add('on');
                        curPart = num;
                        gsap.fromTo(boxs[curPart],{opacity:0},{opacity: 1,duration:0.8});
                    }
                }).to(boxs[curPart],{opacity:0,duration:0.5})
            })
        });
    });

    el.lineFn.forEach((child,key)=>{
        gsap.timeline({
            scrollTrigger: {
                trigger: child,
                start: 'top-=' + base.winsize.vh,
                end: "+=" + base.winsize.vh*0.5,
                scrub: 0.9
            }
        }).fromTo(child, {"--go":0}, {"--go":1, ease: "none"});
    });

    let chunkStep=[
        {start:0.7,end:0.8},
        {start:0.9,end:0.5},
        {start:.8,end:0.9},
        {start:.6,end:0.7},
        {start:.7,end:0.5},
        {start:1,end:0.8},
        {start:1,end:0.6},
        {start:.8,end:1.},
        {start:.5,end:0.5},
    ]
    el.chunkFn.forEach((child,key)=>{
        child.querySelectorAll('.chunk').forEach((items,num)=>{
            const img = items.querySelector('.pic');
            const rect = img.getBoundingClientRect();
            let dir = 0;
            if(rect.height>window.innerHeight){dir = (window.innerWidth*0.5625 - window.innerHeight)/2}
            img.style.left=-(window.innerWidth/9*num)+'px';
            img.style.bottom=-(dir)+'px';
            gsap.timeline({
                scrollTrigger: {
                    trigger: child.parentElement,
                    start: 'top+=' + base.winsize.vh*(1-chunkStep[num].start),
                    end: "+=" + (base.winsize.vh*chunkStep[num].end),
                    scrub: 0.9
                }
            }).fromTo(items, {height:0}, {height:0.15*base.winsize.vw, ease: "power1.Out"});
        })
    });

    if(el.rowSlider){
        new SliderMoveHome({
            container:$(el.rowSlider)
        })
    }

    if(el.stickyRow){
        const parts = el.stickyRow.querySelectorAll('.part');
        const length = parts.length;
        gsap.set(el.stickyRow,{height:(length+0.2)*base.winsize.vh});
        parts.forEach((child,key)=>{
            if(key===(length-1)){
                gsap.timeline({
                    scrollTrigger: {
                        trigger: el.stickyRow,
                        start: 'top+=' + base.winsize.vh*(key-1),
                        end: "+=" + (base.winsize.vh),
                        scrub: 0.9
                    }
                }).fromTo(child, {yPercent:100}, {yPercent:0,ease: "power1.Out"})
            }else if(key>0){
                gsap.timeline({
                    scrollTrigger: {
                        trigger: el.stickyRow,
                        start: 'top+=' + base.winsize.vh*(key-1),
                        end: "+=" + (base.winsize.vh),
                        scrub: 0.9
                    }
                }).fromTo(child, {"pointer-events":"auto"}, {"pointer-events":"none", duration:0.2, ease: "power1.Out"})
                  .fromTo(child, {yPercent:100}, {yPercent:0, duration:0.8,ease: "power1.Out"})
            }
        })
    }

    if(el.fixGo.length>0){
        if(base.shu){
            window.addEventListener("scroll", function(){
                let docScroll = window.pageYOffset || document.documentElement.scrollTop;
                if (docScroll >= base.winsize.vh) {
                    el.fixGo.forEach((child) => {
                        child.classList.add('fix');
                    });
                } else {
                    el.fixGo.forEach((child) => {
                        child.classList.remove('fix');
                    })
                }
            });
        }else {
            lenis.on('scroll', ({ scroll, limit, velocity, direction, progress }) => {
                if (scroll >= base.winsize.vh) {
                    el.fixGo.forEach((child) => {
                        child.classList.add('fix');
                    });
                } else {
                    el.fixGo.forEach((child) => {
                        child.classList.remove('fix');
                    })
                }
            })
        }
        el.fixGo.forEach((child)=>{
            gsap.timeline({
                scrollTrigger: {
                    trigger: child,
                    start: 'top+=' + base.winsize.vh*0.1,
                    end: "+=" + base.winsize.vh*0.8,
                    scrub: 0.9
                }
            }).fromTo(child, {"--go":0}, {"--go":1, ease: "none"});
        });
    }

    /*点击滚动*/
    el.scrEl.forEach((child)=>{
        child.addEventListener("click",function(){
            if(base.shu){
                $('html, body').animate({
                    scrollTop: base.winsize.vh
                }, 1000);
            }else{
                lenis.scrollTo(base.winsize.vh,{duration:1.5});
            }
        })
    })
}

export const HomeFn = (base,lenis)=>{
    const el = {
        logoBox:document.querySelector('.logoBox'),
        loading:document.querySelector('#loading'),
        loadMedia:document.querySelector('#loadMedia'),
        load_logo:document.querySelector('.load_logo'),
        pcNav:document.querySelector('.pcNav'),
        header:document.querySelector("header"),
        banner:document.querySelector(".banner"),
        bannerSum:document.querySelector("#bannerSum"),
        bannerList:document.querySelectorAll('.bannerList'),
        r1:document.querySelector('.r1'),
        r1Txt:document.querySelector('#r1Txt'),
        r2:document.querySelector('.r2'),
        r3:document.querySelector('.r3'),
        r3Txt:document.querySelector('.r3Txt'),
        r4:document.querySelector('.r4'),
        planFn:document.querySelector('#planFn'),
        maskFn:document.querySelector("#maskFn"),
        setFn:document.querySelectorAll('.setFn')
    }
    let loadRect = {
        start:el.load_logo.getBoundingClientRect(),
        end:el.logoBox.getBoundingClientRect(),
    }
    let bannerCur = 0;
    let sketch = new BannerGl({
        debug: true,
        uniforms: {
            intensity: {value: 50., type:'f', min:1., max:100}
        },
        fragment: `
		uniform float time;
		uniform float progress;
		uniform float intensity;
		uniform float width;
		uniform float scaleX;
		uniform float scaleY;
		uniform float transition;
		uniform float radius;
		uniform float swipe;
		uniform sampler2D texture1;
		uniform sampler2D texture2;
		uniform sampler2D displacement;
		uniform vec4 resolution;
		varying vec2 vUv;
		mat2 rotate(float a) {
			float s = sin(a);
			float c = cos(a);
			return mat2(c, -s, s, c);
		}
		const float PI = 3.1415;
		const float angle1 = PI *0.25;
		const float angle2 = -PI *0.75;


		void main()	{
			vec2 newUV = (vUv - vec2(0.5))*resolution.zw + vec2(0.5);

			vec2 uvDivided = fract(newUV*vec2(intensity,1.));


			vec2 uvDisplaced1 = newUV + rotate(3.1415926/4.)*uvDivided*progress*0.1;
			vec2 uvDisplaced2 = newUV + rotate(3.1415926/4.)*uvDivided*(1. - progress)*0.1;

			vec4 t1 = texture2D(texture1,uvDisplaced1);
			vec4 t2 = texture2D(texture2,uvDisplaced2);

			gl_FragColor = mix(t1, t2, progress);

		}

	`,
        call:(cur)=>{
            gsap.timeline({
                onStart:()=>{
                    $(el.bannerSum).text('0'+(cur+1));
                    setTimeout(function(){
                        base.siblings(el.bannerList[cur],"on");
                    },500);
                },
                onComplete:()=>{
                    bannerCur = cur;
                }
            })
              .addLabel("start")
              .fromTo(el.bannerList[bannerCur],{opacity:1},{opacity:0,duration:0.5})
              .fromTo(el.bannerList[cur],{opacity:0},{opacity:1,duration:0.7});
        },
        running:()=>{}
    });
    const fm = new Frame({el:".frameCv"});
    //loading
    gsap.set(el.logoBox,{opacity:0});
    el.loadMedia.onended=function(){
        gsap.timeline({
            onStart:()=>{
                gsap.set(el.load_logo,{opacity:1});
            },
            onComplete:()=>{
                el.loadMedia.parentElement.classList.add('active');
                gsap.set(el.load_logo,{x:-(loadRect.start.x-loadRect.end.x),y:-(loadRect.start.y-loadRect.end.y),scale:(loadRect.end.height/loadRect.start.height)})
                setTimeout(function(){
                    gsap.set(el.logoBox,{opacity:1});
                    el.pcNav.classList.add('go');
                    base.siblings(el.bannerList[bannerCur],"on");
                    sketch.start();
                    el.banner.classList.add("go");
                   $(el.banner.querySelectorAll('.alanParent')).addClass("go");
                   $(el.banner.querySelectorAll('.alanDownEl')).addClass("go");
                    el.loading.style.display="none";
                },1000);
            }
        })
          .fromTo(el.loadMedia,{opacity:1},{opacity:0,duration:0.3});
    }


    el.setFn.forEach((child)=>{
        child.addEventListener("mouseenter",function(){
            base.siblings(child,"on");
        })
    })


    if(el.r1){
        let arr = [228,320,410,532];
        let arrLen = arr.length;
        let step = {value:0};
        const parts = el.r1.querySelectorAll('.part');
        const steps = el.r1.querySelectorAll('.step');

        steps.forEach((child,key)=>{
            ScrollTrigger.create({
                trigger: child,
                start:'top-='+base.winsize.vh,
                end: "+="+(child.getBoundingClientRect().height),
                toggleActions: "restart pause resume none",
                onToggle: (self) => {
                    if(self.isActive){
                        if(key===0){}
                        parts[key].classList.add('go')
                    }else{
                        parts[key].classList.remove('go')
                    }
                }
            });
        });
        gsap.timeline({
            scrollTrigger: {
                trigger: el.r1,
                start: 'top+=' + base.winsize.vh*0.1,
                end: "+=" + base.winsize.vh*4,
                scrub: 0.9
            },
            onUpdate:()=>{
                const num = Math.floor(step.value);
                fm.upData(num);
            }
        })
          .addLabel("start")
          .to(step,{value:arr[0],ease: "none"})
          .to(el.r1Txt,{opacity:0,duration:0.1,ease: "none"},"start")
          .addLabel('a1')
          .to(step,{value:arr[1],ease: "none"},"a1+=0.3")
          .addLabel('a2')
          .to(step,{value:arr[2],ease: "none"},"a2+=0.3")
          .addLabel('a3')
          .to(step,{value:arr[3],ease: "none"},"a3+=0.3");
    }

    if(el.r2){
        new SliderMoveHome({
            container:$(el.r2)
        })
    }

    // if(el.r3){
    //     gsap.timeline({
    //         scrollTrigger: {
    //             trigger: el.r2,
    //             start: 'top+=' + base.winsize.vh*0.5,
    //             end: "+=" + base.winsize.vh*0.6,
    //             scrub: 0.9
    //         }
    //     }).fromTo(el.r3Txt,{y:0},{y:-base.winsize.vh*0.3,ease: "none"})
    // }

    if(el.planFn){
        const parts = el.planFn.querySelectorAll('.part');
        const chunk = el.planFn.querySelectorAll('.plan');
        const start = el.planFn.querySelector('.start');
        let rect = base.winsize.vh*1.4;
        base.Viewport(start,function(){
            start.parentElement.classList.add('go');
        },function(){
            start.parentElement.classList.remove('go');
        });
        parts.forEach((child,key)=>{
            gsap.timeline({
                scrollTrigger: {
                    trigger: child.parentElement,
                    start: 'top-=' + (base.winsize.vh*0.5 - (rect*0.5*key)),
                    end: "+=" + (rect),
                    scrub: 0.9
                }
            }).fromTo(child, {opacity:0,yPercent:80}, {opacity:1,yPercent:0,duration:0.5,ease: "none"})
              .addLabel("start")
              .to(child,{'pointer-events':"none",duration:0.3,ease: "none"},"start")
              .to(child,{yPercent:-30,duration:0.5,ease: "none"},"start+=0.3")
              .to(child,{opacity:0,duration:0.4,ease: "none"},"start+=0.3")
        });
        chunk.forEach((child,key)=>{
            ScrollTrigger.create({
                trigger: el.planFn,
                start:'top-='+ ( -(rect*0.5*key)),
                end: "+="+(rect*0.5),
                toggleActions: "restart pause resume none",
                onToggle: (self) => {
                    if(self.isActive){
                        child.classList.add('on');
                        $(chunk).addClass('none');
                    }else{
                        child.classList.remove('on');
                        $(chunk).removeClass('none');
                    }
                }
            });
            gsap.timeline({
                scrollTrigger: {
                    trigger: el.r4,
                    start: 'top-=' + ( base.winsize.vh * 0.8 ),
                    end: "+=" + (base.winsize.vh*0.8),
                    scrub: 0.9
                }
            }).addLabel('zero')
              .to(child,{yPercent:(-80+(10*key)),duration:0.9,ease: "none"})
        });
    }

    if(el.maskFn){
        for (let i = 0; i < 40; i++) {
            let span = document.createElement('span');
            el.maskFn.append(span);
        }
    }
}

export const NewFn = (base)=>{
    const el = {
        pcNav:document.querySelector('.pcNav'),
    };
}

export const ContactFn = (base)=>{
    const el = {
        contactRow:document.querySelector('.contactRow'),
    };
    if(el.contactRow){
        const mask = el.contactRow.querySelector('.mask');
        const toBtn = el.contactRow.querySelector('.toBtn');
        const inner = el.contactRow.querySelector('.inner');
        const con = el.contactRow.querySelector('.content');
        const returnEl = el.contactRow.querySelector('.return');

        const pages = new SingleScreen({
            container:document.querySelector('#fullPage'),
            beforeLeave:function(cur,curElm,next,nextElem,pageDiff){
                switch (next) {
                    case 0:
                        mask.classList.remove('active');
                        con.classList.remove('go');
                        setTimeout(function(){
                            inner.classList.add('go');
                        },700);
                        break;
                    case 1:
                        mask.classList.add('active');
                        inner.classList.remove('go');
                        setTimeout(function(){
                            con.classList.add('go');
                        },700);
                        break;
                }
            },
            afterLeave:function(next){
                pages.play();
            }
        });
        pages.play();
        toBtn.addEventListener("click",function(){
            pages.moveTo(1);
        });
        returnEl.addEventListener("click",function(){
            pages.moveTo(0);
        });
    }
}

export const ApplyFn = (base)=>{
    const el = {
        r1Sw:document.querySelector('.r1Sw'),
        stickyRow:document.querySelector('.stickyRow')
    }
    if(el.r1Sw){
        const r1Sw = new Swiper(el.r1Sw, {
            initialSlide: 0,
            speed:800,
            spaceBetween:base.winsize.vw*0.1,
            slidesPerView : 1,
            on:{ slideChange: function(){} }
        });
        document.querySelectorAll('.r1Sw_dot').forEach((child,key)=>{
            child.addEventListener("click",function(){
                r1Sw.slideTo(key);
                base.siblings(child,"on");
            })
        })
    }
    if(el.stickyRow){
        const photos = el.stickyRow.querySelectorAll('.sliderPhoto');
        photos.forEach((child)=>{
            const pics = child.querySelectorAll('.pic');
            let len = pics.length;
            let num = 0;
            if(len>1){
                setInterval(function(){
                    num++;
                    base.siblings(pics[num%len],"on");
                    $(child).next('.pager').find('.dot').eq(num%len).addClass('on').siblings().removeClass('on');
                },3000);
            }
        })
    }
}

export const TechFn = (base)=>{
    const el={
        r1:document.querySelector('.r1'),
        fxSlider:document.querySelector('#fxSlider'),
        r2Sw:document.querySelector('.r2Sw'),
        r3Sw:document.querySelector('.r3Sw'),
    }
    if(el.fxSlider){
        const fxStep = el.fxSlider.querySelector('.fxStep');
        const fxDot = el.fxSlider.querySelector('.fxDot');
        const sliderFx = new SliderMove({
            container:$(el.fxSlider),
            time:1200
        });
        base.Viewport(fxStep,function(){
            fxDot.classList.add('go');
            sliderFx.start();
        },function(){
            sliderFx.stop();
            fxDot.classList.remove('go');
        });
    }
    if(el.r1){
        const silderFn = new SliderMove();
        base.Viewport(el.r1.querySelector('.slider'),function(){},function(){},"0%",true,function(){
            silderFn.start();
        });
    }
    if(el.r2Sw){
        const dir = 0.042*base.winsize.vw;
        const years = document.querySelector('.years');
        const yearList = years.querySelectorAll('li');
        const r2Swiper = new Swiper(el.r2Sw,{
            initialSlide:3,
            slidesPerView:1,
            speed:800,
            allowTouchMove: base.shu,
            centeredSlides: true,
            effect : 'creative',
            creativeEffect: {
                limitProgress:2,
                prev: {
                    translate: ["-5%", "-5%", 0],
                    scale: 1.05,
                    opacity:0
                },
                next: {
                    translate: ["10%", "10%", 0],
                    scale: 0.97,
                    opacity: .5
                },
            },
            on:{
                slideChangeTransitionStart: function(){
                    const num = this.realIndex;
                    if(years){
                        gsap.set(years,{y:-dir*num});
                        base.siblings(yearList[num],'on');
                    }
                },
            },
            navigation: {
                nextEl: document.querySelector('.r2Sw_next'),
                prevEl: document.querySelector('.r2Sw_prev'),
            }
        });
        yearList.forEach((child,key)=>{
            child.addEventListener("click",function(){
                r2Swiper.slideTo(key);
            })
        })
    }
    if(el.r3Sw){
        const sw3 = new Swiper(el.r3Sw, {
            autoplay:true,
            loop:true,
            initialSlide: 2,
            speed:800,
            centeredSlides:true,
            spaceBetween:base.winsize.vw*0.08,
            slidesPerView : "auto",
            on:{ slideChange: function(){} }
        });
        document.querySelector('.r3Sw_prev').addEventListener("click",function(){
            sw3.slidePrev();
        });
        document.querySelector('.r3Sw_next').addEventListener("click",function(){
            sw3.slideNext();
        })
    }

}

export const AboutFn = (base)=>{
    const el = {
        r3Slider:document.querySelector("#r3Slider"),
        r4Slider:document.querySelector("#r4Slider"),
        r5Sw:document.querySelectorAll('.r5Sw'),
    }
    if(el.r3Slider){
        new SliderMove({
            container:$(el.r3Slider),
            time:1200
        })
    }
    if(el.r4Slider){
        const dir = 0.1*base.winsize.vw;
        const years = document.querySelector('.years');
        const yearList = years.querySelectorAll('li');
        const silderFn = new SliderMove({
            container:$(el.r4Slider),
            loop:true,
            time:1200,
            call:function(cur){
                if(years){
                    gsap.set(years,{y:-dir*cur});
                    base.siblings(yearList[cur],'on');
                }
            }
        });
        yearList.forEach((child,key)=>{
            child.addEventListener("click",function(){
                silderFn.next(1,key);
            })
        })
        base.Viewport(el.r4Slider,function(){},function(){},"0%",true,function(){
            silderFn.start();
            silderFn.loop();
        });
    }
    let swArr=[];
    el.r5Sw.forEach((child)=>{
        const sw5 = new Swiper(child, {
            loop:true,
            initialSlide: 2,
            speed:800,
            centeredSlides:true,
            spaceBetween:base.winsize.vw*0.08,
            slidesPerView : "auto",
            on:{ slideChange: function(){} }
        });
        swArr.push(sw5);
    });
    document.querySelector('.r5Sw_prev').addEventListener("click",function(){
        el.r5Sw.forEach((child,key)=>{
            if($(child).hasClass('on')){
                swArr[key].slidePrev();
            }
        })
    });
    document.querySelector('.r5Sw_next').addEventListener("click",function(){
        el.r5Sw.forEach((child,key)=>{
            if($(child).hasClass('on')){
                swArr[key].slideNext();
            }
        })
    });
}